import styles from '../styles.less';
import { useState } from 'react';
import { Button, Col, Form, Input, Row, Select } from 'antd';
import 'dayjs/locale/zh-cn';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import { filterValues } from '@/utils/utils';

const SearchForm = (props) => {

  const { submitting } = props;
  const { setTablePayload, tablePayload } = props.data;
  const [form] = Form.useForm();
  const [expand, setExpand] = useState(false);

  /* 搜索提交 */
  const onFinish = (values) => {
    setTablePayload({ ...tablePayload, pageNum: 1, param: { ...filterValues(values) } });
  };

  /* 搜索重置 */
  const onReset = () => {
    form.resetFields();
    setTablePayload({ ...tablePayload, pageNum: 1, param: {} });
  };

  return (
    <Form form={form} labelCol={{ span: 5 }} className={styles.mySearchForm} onFinish={onFinish}>
      {!expand ? (
        <Row gutter={64}>
          <Col span={8}>
            <Form.Item name={`postName`} label={`岗位名称`}>
              <Input placeholder="请输入岗位名称" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name={`postCode`} label={`岗位编号`}>
              <Input placeholder="请输入岗位编号" />
            </Form.Item>
          </Col>
          <Col span={8} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit" loading={submitting}>
              查询
            </Button>
            <Button style={{ margin: '0 8px' }} onClick={() => onReset()}>
              重置
            </Button>
            <a style={{ fontSize: 12 }} onClick={() => setExpand(!expand)}>
              <DownOutlined /> 展开
            </a>
          </Col>
        </Row>
      ) : (
        <>
          <Row gutter={64}>
            <Col span={8}>
              <Form.Item name={`postName`} label={`岗位名称`}>
                <Input placeholder="请输入岗位名称" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name={`postCode`} label={`岗位编号`}>
                <Input placeholder="请输入岗位编号" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name={`status`} label={`当前状态`}>
                <Select placeholder="请选择当前状态">
                  <Select.Option value={'0'}>停用</Select.Option>
                  <Select.Option value={'1'}>正常</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={64} style={{ marginTop: '16px' }}>
            <Col span={24} style={{ textAlign: 'right' }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                查询
              </Button>
              <Button style={{ margin: '0 8px' }} onClick={() => onReset()}>
                重置
              </Button>
              <a style={{ fontSize: 12 }} onClick={() => setExpand(!expand)}>
                <UpOutlined /> 收起
              </a>
            </Col>
          </Row>
        </>
      )}
    </Form>
  );
};

export default connect(({ loading }) => {
  return {
    submitting: loading.effects['PSystemPost/fetchList'],
  };
})(SearchForm);
